<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

</head>

<script  th:src="@{/js/jquery-1.11.3.min.js}"></script>
<script  th:src="@{/js/util.js}"></script>

<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>

<body>



<div style="position: absolute;left:0;right:0;top: 0;bottom:0;" >
    <div style="display: flex;justify-content: center;height: 100%;align-items: center">
        <form class="layui-form"  method="post">
            <div class="layui-form-item">
                <div>
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" class="layui-input" lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div>
                    <label class="layui-form-label">店铺名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" class="layui-input" lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div>
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password"  class="layui-input" lay-verify="required">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline">
                    <img  style="width: 188px;height: 200px" id="previewImg">
                    <input type="file" name="pic" id="pic" style="display:none">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="sellerForm">注册</button>
                </div>
            </div>
        </form>

    </div>
</div>

</body>
<script type="text/javascript" th:inline="javascript">

    $(function(){



        layui.use('form', function(){
            var form = layui.form;

            $("#previewImg").click(function(){
                $("#pic").click()

            })

            $("#pic").change(function (){
                let file=this.files[0];
                imgPreview(file,$("#previewImg")[0]);

            })

            form.on('submit(sellerForm)',function(data){

                let formData =new FormData(data.form);

                $.ajax({
                    url: '/login/sellerRegister',
                    contentType: false,
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    success: function(res){

                            layer.msg(res.msg)


                    },

                    type: 'post',
                })


            })

            form.render();
        });
    })

    function imgPreview(file,imgDom){
        if (window.FileReader){
            var reader =new FileReader();
        }else{
            alert("设备不支持图片预览功能");
        }
        var imageType=/^image\//;
        if(!imageType.test(file.type)){
            alert("请选择图片");
            return;
        }
        reader.onload=function(e){

            imgDom.src=e.target.result;
        }
        reader.readAsDataURL(file);
    }


</script>
</html>